<template>
  <div class="flow_assessment">
    <!-- 标题 -->
    <div class="group_7_flow">
      <div class="image-wrapper_flow">
        <img class="image_1_flow" referrerpolicy="no-referrer"
          src="../assets/img/SketchPng26505d59e150617f0b34239825c581f5e252d1a01d3d1248137c55940dc1da99.png" />
      </div>
      <span class="text_13_flow">容流评估</span>
    </div>

    <!-- 背景图片，之后替换为GIS -->
    <!-- <img
      class="image_3"
      referrerpolicy="no-referrer"
      src="@/assets/img/module2/temp/tempgis.png"
    /> -->

    <!-- 时间查询 -->
    <div class="group_8_flow">
      <span class="text_time_flow">时间段</span>
      <div class="time_block">
        <el-date-picker v-model="selectTime" type="datetime" placeholder="选择日期时间" value-format="yyyy-MM-ddTHH:mm:ss"
          popper-class="selectDown" @change="handleTimeChange" @blur="handleTimeBlur" :format="showTime"
          @focus="handleTimeVisibleChange" background="transparent" :picker-options="pickerOptions">
        </el-date-picker>
      </div>

      <el-button type="primary" @click="fetchTableData">查询</el-button>
    </div>

    <!-- gis -->
    <div id="cesiumContainer" class="cesium_flow"></div>

    <!-- 态势评估模块 -->
    <div class="container_flow">
      <!-- 标题 -->
      <div class="group_20_flow">
        <div class="group_21_flow">
          <img class="image_3_flow"
            src="../assets/img/SketchPnge98c6bf1fe552f69e9323b59eaf92d6bef1bbd085f1b8cecefc968590eb3010d.png" />
          <img class="thumbnail_55_flow"
            src="../assets/img/SketchPng50cff3f326e6df8183103e928ce1a68e6f8c4c6371bf014928ec4209ce963753.png" />
        </div>
        <span class="text_21_flow">态势评估情况</span>
      </div>
      <!-- 选择查询 -->
      <div class="group_22_flow">
        <el-select v-model="queryData.airspaceType" class="select-box_flow block_17_flow" popper-class="dxfSelect"
          placeholder="请选择" @change="fetchTableData">
          <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
        <el-select v-model="queryData.alertLevel" class="select-box_flow block_18_flow" popper-class="dxfSelect"
          placeholder="请选择" @change="fetchTableData">
          <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </div>
      <!-- 列表  -->
      <div class="regional_table_flow">
        <el-table :data="tableData" height="590" style="width: 94%" ref="table" :row-key="(row) => row.id"
          @expand-change="onExpandChange" :expand-row-keys="expands">
          <el-table-column type="expand">
            <template v-slot:default="props">
              <div class="section_14_flow" ref="expandPanel">
                <div class="buttons-container_flow">
                  <div class="text-wrapper_10_flow">
                    <button class="current-period-btn" @click="togglePeriod('current', props.row)">
                      当前时段运行数据
                    </button>
                  </div>
                  <div class="text-wrapper_11_flow">
                    <button class="full-day-btn" @click="togglePeriod('fullDay', props.row)">
                      全天整体运行数据
                    </button>
                  </div>
                </div>
                <div v-if="currentPeriodActive">
                  <div class="group0_39_flow">
                    <span class="text_33_flow">空域流量</span>
                    <span class="text_34_flow">{{ props.row.airspaceFlow || "-" }} 架次/小时</span>
                    <span class="text_35_flow">空域容量</span>
                    <span class="text_36_flow">{{ props.row.airspaceCapacity || "-" }} 架次/小时</span>
                    <span class="text_39_flow">相关空域网格</span>
                    <span class="text_40_flow">{{
                      props.row.airspaceGrid || "-"
                    }}</span>
                  </div>
                </div>
                <div v-else class="full-day-data_flow">
                  <div style="
                      display: flex;
                      align-items: center;
                      justify-content: space-between;
                    ">
                    <p style="margin-left: 10px; margin-top: 5px">容流曲线</p>
                    <button @click="handleView" class="btn_full">
                      全天曲线
                    </button>
                  </div>
                  <div class="charts_flow">
                    <div ref="chartContainer" style="height: 220px"></div>
                  </div>
                  <p style="margin-left: 10px">告警时段信息</p>
                  <div class="charts_flow" style="margin-bottom: 20px">
                    <!-- <p style="margin-left: 10px">{{ detailData.alarmTime }}</p> -->
                    <ul>
                      <li v-for="(time, index) in formattedAlarmTimes" :key="index">
                        {{ time }}
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </template>
          </el-table-column>
          <!-- 其他的列定义 -->
          <!-- <el-table-column label="序号" prop="id"> </el-table-column> -->
          <!-- 显示虚拟的ID -->
          <el-table-column label="序号">
            <template slot-scope="scope">
              {{ scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column label="名称" prop="airspaceNumber">
          </el-table-column>
          <el-table-column label="风险" prop="alertLevel">
            <template slot-scope="scope">
              <div class="risk-level_flow">
                <img :src="getRiskIcon(scope.row.alertLevel)" alt="Risk Icon" class="risk-icon" />
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="left-module" v-if="dialogVisible">
      <div class="module-header">
        <div class="group_20_flow">
          <div class="group_21_flow">
            <img class="image_3_flow"
              src="../assets/img/SketchPnge98c6bf1fe552f69e9323b59eaf92d6bef1bbd085f1b8cecefc968590eb3010d.png" />
            <img class="thumbnail_55_flow"
              src="../assets/img/SketchPng50cff3f326e6df8183103e928ce1a68e6f8c4c6371bf014928ec4209ce963753.png" />
          </div>
          <span class="text_21_flow">全天容流曲线</span>
        </div>
        <!-- <span>全天容流曲线</span> -->
        <button @click="closeModule" class="btn_full">关闭</button>
      </div>
      <div class="module-content">
        <div class="charts_flow">
          <div ref="fullChartContainer" style="height: 300px"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import axios from "axios";
import { drawParallelogramArea } from "@/utils/draw2DShapes.js";
import { draw3DPipelineTrack } from "@/utils/drawPipeline.js";
import {
  draw3DPolygonalPrismM1,
  draw3DRectangularPipelineTrackM1_2,
} from "@/utils/draw3D-module1.js";
import {
  drawLargeRectangle,
  divideAndColorSquares,
  drawLargeRectangle3D,
  divideAndColorSquares3D,
  addConnectionSphere,
  clearAllSpheres,
  addDroneModel,
  clearAllDrones,
} from "@/utils/drawGrid";
export default {
  name: "Module5FlowAssessment",
  data() {
    return {
      droneModels: [],
      wsClosing: false,
      //  positions:[],// 用于存储所有无人机球体的位置
      ws: null,
      selectTime: "", //v-model绑定的时间参数
      showTime: "",
      startTimeNow: "",
      endTimeNow: "",
      calMinTime: 0, //判断所选时间的时间段
      calSecTime: 0,
      formattedAlarmTimes: "",
      dialogVisible: false, // 控制弹窗显示状态
      viewer: null,
      currentPeriodActive: true,
      expands: [], //点击行
      queryData: {
        endTime: "",
        startTime: "",
        airspaceType: "",
        alertLevel: "",
      },
      tableData: [], //接收查询后的表格数据
      detailData: [], //接收全体整体运行数据
      selectedValue1: 0,
      selectedValue2: 0,
      pickerOptions: {
        disabledDate(time) {
          // 禁止选择今天的日期及以后的日期
          return time.getTime() > Date.now();
        },
      },
      options1: [
        { value: "", label: "全部位置" },
        { value: 1, label: "起降区" },
        { value: 2, label: "航路" },
        { value: 3, label: "作业区" },
      ],
      options2: [
        { value: "", label: "全部风险" },
        { value: 5, label: "五级风险" },
        { value: 4, label: "四级风险" },
        { value: 3, label: "三级风险" },
        { value: 2, label: "二级风险" },
        { value: 1, label: "一级风险" },
        // 其他选项...
      ],
    };
  },
  created() {
    this.selectTime = this.getCurrentDateTime();
    this.handleTimeChange(this.selectTime);
  },
  async mounted() {
    //  const future = this.fetchTableData();
    await this.initializeCesium();
    this.fetchTableData();
    //  await future;
    // this.updateRoutes();
    // this.updatePolygonAreas();
    // 确保 DOM 加载完成后再执行滚动逻辑
    this.$nextTick(() => {
      if (this.expands.length > 0) {
        this.scrollToVisibleRow(
          this.tableData.find((row) => row.id === this.expands[0])
        );
      }
    });
  },
  methods: {
    //处理获取的实时时间 格式为：2024-09-19T14:18:35
    getCurrentDateTime() {
      const now = new Date();
      const year = now.getFullYear();
      const month = String(now.getMonth() + 1).padStart(2, "0");
      const day = String(now.getDate()).padStart(2, "0");
      const hour = String(now.getHours()).padStart(2, "0");
      const minute = String(now.getMinutes()).padStart(2, "0");
      const second = String(now.getSeconds()).padStart(2, "0");

      // 返回格式化的时间字符串
      return `${year}-${month}-${day}T${hour}:${minute}:${second}`;
    },
    handleTimeChange(time) {
      this.calMinTime = parseInt(time.slice(14, 16), 10);

      if (this.calMinTime >= 0 && this.calMinTime < 15) {
        //用于页面的显示
        this.showTime = time.slice(0, 10);
        this.showTime =
          this.showTime +
          " " +
          time.slice(11, 13) +
          ":00-" +
          time.slice(11, 13) +
          ":15";
        //用于后端的查询信息
        this.queryData.startTime = time.slice(0, 13) + ":00:00";
        this.queryData.endTime = time.slice(0, 13) + ":14:59";
      } else if (this.calMinTime >= 15 && this.calMinTime < 30) {
        this.showTime = time.slice(0, 10);
        this.showTime =
          this.showTime +
          " " +
          time.slice(11, 13) +
          ":15-" +
          time.slice(11, 13) +
          ":30";
        //用于后端的查询信息
        this.queryData.startTime = time.slice(0, 13) + ":15:00";
        this.queryData.endTime = time.slice(0, 13) + ":29:59";
      } else if (this.calMinTime >= 30 && this.calMinTime < 45) {
        this.showTime = time.slice(0, 10);
        this.showTime =
          this.showTime +
          " " +
          time.slice(11, 13) +
          ":30-" +
          time.slice(11, 13) +
          ":45";
        //用于后端的查询信息
        this.queryData.startTime = time.slice(0, 13) + ":30:00";
        this.queryData.endTime = time.slice(0, 13) + ":44:59";
      } else if (this.calMinTime >= 45 && this.calMinTime < 60) {
        this.showTime = time.slice(0, 10);
        const calHour = parseInt(time.slice(11, 13)) + 1;
        const nextHourStr = calHour < 10 ? `0${calHour}` : `${calHour}`;
        this.showTime =
          this.showTime +
          " " +
          time.slice(11, 13) +
          ":45-" +
          nextHourStr +
          ":00";
        //用于后端的查询信息
        this.queryData.startTime = time.slice(0, 13) + ":45:00";
        this.queryData.endTime = time.slice(0, 13) + ":59:59";
      }
      // console.log(this.queryData.startTime);
    },
    handleTimeVisibleChange(change) {
      // console.log("handleTimeVisibleChange");
      this.showTime = "yyyy-MM-dd HH:mm:ss";
    },
    handleTimeBlur() {
      //console.log("handleTimeBlur");
      this.handleTimeChange(this.selectTime);
    },

    handleView() {
      this.dialogVisible = true;
      this.$nextTick(() => {
        this.fullChart();
      });
    },
    closeModule() {
      this.dialogVisible = false;
    },

    async initializeCesium() {
      this.viewer = new Xmap.Viewer("cesiumContainer").viewer;
      Xmap.Operates.Fly.camaraFlyToPosition(
        { lng: 120, lat: 20, height: 10000 },
        null,
        0
      );
      const amapimg = Xmap.Layers.BaseLayer.createImageryProvider('amap', {
        style: 'img',
        crs: 'WGS84',
      });
      Xmap.Layers.BaseLayer.addBaseLayer([
        { layer: amapimg, index: 0 },
      ]);
      // Xmap.AirspaceManage.HierarchicalGrid.ShowGridsLevel(2,true);
      //Xmap.AirspaceManage.HierarchicalGrid.ShowGridsWithLevelDynamic();

      // 经纬度点列表
      // const points = [
      //   { longitude: 113.55895, latitude: 22.113694 },
      //   { longitude: 113.559382, latitude: 22.14704 },
      //   { longitude: 113.505771, latitude: 22.147709},
      //   { longitude: 113.505196, latitude: 22.113828 }
      // ];

      // // 计算范围
      // const minLongitude = Math.min(...points.map(point => point.longitude));
      // const maxLongitude = Math.max(...points.map(point => point.longitude));
      // const minLatitude = Math.min(...points.map(point => point.latitude));
      // const maxLatitude = Math.max(...points.map(point => point.latitude));

      // // 层级级别和高度
      // const level = 8;
      // const height = 10;

      // // 生成网格
      // const step = 0.0002; // 步长可以根据需要调整
      // for (let longitude = minLongitude; longitude <= maxLongitude; longitude += step) {
      //   for (let latitude = minLatitude; latitude <= maxLatitude; latitude += step) {
      //     const griddingNumber = Xmap.AirspaceManage.HierarchicalGrid.EveryLevelCoding(level, longitude, latitude, height);
      //     // console.log(`Longitude: ${longitude}, Latitude: ${latitude}, Height: ${height}, Gridding Number: ${griddingNumber}`);
      //    console.log(`EveryLevelCoding: (8,${longitude},${latitude},${height}), Gridding Number: ${griddingNumber}`);
      //   }
      // }

      //  const griddingNumber = Xmap.AirspaceManage.HierarchicalGrid.EveryLevelCoding(8,113.457887,22.143248, 2);
      //  console.log(griddingNumber);

      //  const llh = Xmap.AirspaceManage.HierarchicalGrid.CodingToBLH('VKJA101');
      //  console.log(llh);

      // Xmap.AirspaceManage.HierarchicalGrid.WireframeForLevelGrids(2,true);

      // console.log(Xmap.AirspaceManage.HierarchicalGrid.SetStyleForSingleGrid('VKJA101',{r:100/255,g:100/255,b:100/255,a:0.6},true));
      //  console.log(Xmap.AirspaceManage.HierarchicalGrid.createImageryProvider('tiles/x.png',{url:'geoserve/wms',layers:'geo'}));
      //  console.log(Xmap.AirspaceManage.HierarchicalGrid.load3dtiles('https://data.cesium.com/3dtiles/v1/SanFrancisco/tileset.json'));
      // console.log(Xmap.AirspaceManage.HierarchicalGrid.loadDEM('https://api.maptiler.com/maps/elevation/512/{z}/{x}/{y}.png?key=YOUR_API_KEY'));

      //  Xmap.AirspaceManage.HierarchicalGrid.CodeVisibleForLevelGrids(2,false);
      // Xmap.AirspaceManage.HierarchicalGrid.loadCityGrids({
      // B:34.45,
      // L:112.3,
      // height:234
      // },2);

      // Xmap.AirspaceManage.HierarchicalGrid.AddGeographic('Cylinder',{r:100/255,g:100/255,b:100/255,a:0.6});

      // console.log(Xmap.AirspaceManage.HierarchicalGrid.ProjectionGrid(2));

      //  Xmap.ScreenCoordToGraphy();
    },

    // 绘制航路折线
    updateRoutes() {
      // 清除之前的实体
      // this.viewer.entities.removeAll();
      // console.log("tableData1111", this.tableData);
      // 遍历表格数据，找到航路数据
      this.tableData.forEach((item) => {
        // console.log("item", item)
        if (item.wayPoints) {
          const positions = [];
          const pointNames = [];
          const sizes = [];

          // 提取经纬度和高度，并生成每段的宽高
          item.wayPoints.forEach((point, index) => {
            positions.push(point.longitude, point.latitude, point.altitude);
            pointNames.push(`${item.airspaceObjectName} - 点${index + 1}`);

            if (index < item.wayPoints.length - 1) {
              sizes.push([500, 200]); // 宽度为500米，高度为200米
            }
          });
          // console.log("positions", positions);
          // console.log("sizes", sizes);
          // 调用自定义的绘制方法
          draw3DRectangularPipelineTrackM1_2(
            this.viewer,
            positions,
            sizes,
            "YELLOW",
            pointNames
          );
        }
      });

      // 缩放视图到新添加的航路
      this.viewer.zoomTo(this.viewer.entities);
    },
    updatePolygonAreas() {
      // 清除之前的实体
      // this.viewer.entities.removeAll();

      // 遍历表格数据，找到多边形区域数据
      this.tableData.forEach((item) => {
        // console.log("item", item)
        if (item.polygonPoints && item.polygonPoints.length > 0) {
          const positions = [];
          const pointNames = [];
          let minHeight = Number.POSITIVE_INFINITY;
          let maxHeight = Number.NEGATIVE_INFINITY;

          // 提取经纬度和高度
          item.polygonPoints.forEach((point, index) => {
            positions.push(point.longitude, point.latitude);
            pointNames.push(`${item.airspaceNumber} - 点${index + 1}`);

            // 计算最小和最大高度
            if (point.minAltitude < minHeight) {
              minHeight = point.minAltitude;
            }
            if (point.maxAltitude > maxHeight) {
              maxHeight = point.maxAltitude;
            }
          });

          // 使用自定义方法绘制多边形柱状体
          draw3DPolygonalPrismM1(
            this.viewer,
            positions,
            minHeight,
            maxHeight,
            "BLUE",
            0.5,
            pointNames
          );
        }
      });

      // 缩放视图到新添加的区域
      this.viewer.zoomTo(this.viewer.entities);
    },
    // async initializeCesium() {
    //   try {
    //     // 初始化 Cesium Viewer
    //     this.viewer = new Cesium.Viewer("cesiumContainer", {
    //       sceneModePicker: false,
    //       baseLayerPicker: false,
    //       geocoder: false,
    //       homeButton: false,
    //       navigationHelpButton: false,
    //       infoBox: false,
    //       timeline: false,
    //       animation: false,
    //     });
    //     this.viewer.scene.frameState.creditDisplay.container.style.display =
    //       "none"; // 设置初始视角

    //     this.viewer.camera.setView({
    //       destination: Cesium.Cartesian3.fromDegrees(113.5, 22.1, 1000),
    //     });

    //     // 定义大范围矩形的四个顶点坐标（经度，纬度）
    //     // const largeRectangleCorners = [
    //     //   { longitude: 113.0, latitude: 22.0 },
    //     //   { longitude: 114.5, latitude: 22.0 },
    //     //   { longitude: 114.5, latitude: 22.9 },
    //     //   { longitude: 113.0, latitude: 22.9 },
    //     // ];
    //     // 绘制大范围矩形

    //     /*
    //     drawLargeRectangle(this.viewer, largeRectangleCorners, "skyblue", true); // 将大范围矩形分割成多个正方形

    //     divideAndColorSquares(
    //       this.viewer,
    //       largeRectangleCorners,
    //       0.05// 正方形边长
    //     );
    //     */

    //     // drawLargeRectangle3D(this.viewer, largeRectangleCorners, 'skyblue', true, 5000);
    //     // divideAndColorSquares3D(this.viewer, largeRectangleCorners, 0.05, 5000);

    //     // 定义三条轨迹的位置
    //     //         const track1Positions = [
    //     //           113.5, 22.1, 500, 113.52, 22.2, 1000, 113.53, 22.05, 1500, 113.56,
    //     //           22.15, 2000, 113.61, 22.2, 2500, 113.65, 22.25, 3000, 113.7, 22.1,
    //     //           2500,
    //     //         ];

    //     //         const track2Positions = [
    //     //           113.3, 22.3, 300, 113.35, 22.4, 600, 113.4, 22.38, 900, 113.45, 22.5,
    //     //           1200, 113.5, 22.45, 1500, 113.51, 22.55, 1800, 113.53, 22.6, 2100,
    //     //           113.55, 22.5, 2400, 113.57, 22.65, 2700, 113.58, 22.7, 3000, 113.6,
    //     //           22.75, 3300, 113.62, 22.8, 3600, 113.63, 22.85, 3900,
    //     //         ];

    //     //         const track3Positions = [
    //     //           113.8, 22.6, 300, 113.85, 22.63, 600, 113.89, 22.75, 900, 113.9,
    //     //           22.65, 1200, 113.92, 22.7, 1500, 113.93, 22.75, 1800, 113.96, 22.8,
    //     //           2100, 114.0, 22.85, 2400, 114.02, 22.9, 2700,
    //     //         ];
    //     //         // 定义半径数组
    //     //         const track1Radii = new Array(track1Positions.length / 3).fill(50);
    //     //         const track2Radii = new Array(track2Positions.length / 3).fill(50);
    //     //         const track3Radii = new Array(track3Positions.length / 3).fill(50); // 绘制三条轨迹

    //     //         draw3DPipelineTrack(
    //     //           this.viewer,
    //     //           track1Positions,
    //     //           track1Radii,
    //     //           "YELLOW"
    //     //         );
    //     //         draw3DPipelineTrack(this.viewer, track2Positions, track2Radii, "WHITE");
    //     //         draw3DPipelineTrack(this.viewer, track3Positions, track3Radii, "BLUE");
    //     //         const position1 = [
    //     //           113.3, 22.0, 113.4, 22.0, 113.45, 22.1, 113.35, 22.1,
    //     //         ]; // 平行四边形顶点
    //     //         // drawParallelogramArea(this.viewer, position1, "RED", 0.5);
    //     // draw3DPolygonalPrismM1(this.viewer, position1, 200, 1000, 'RED', 0.5);

    //     //         const position2 = [
    //     //           113.5, 22.1, 113.54, 22.2, 113.6, 22.15, 113.61, 22.1,
    //     //         ]; // 平行四边形顶点
    //     //         // drawParallelogramArea(this.viewer, position2, "RED", 0.5);
    //     // draw3DPolygonalPrismM1(this.viewer, position2, 2000, 8000, 'RED', 0.5);

    //     // this.viewer.zoomTo(this.viewer.entities);
    //   } catch (error) {
    //     console.error("Cesium initialization failed:", error);
    //   }
    // },
    getRiskIcon(riskLevel) {
      // 返回对应风险等级的图片路径
      switch (riskLevel) {
        case 1:
          return require("../assets/img/risk-1.png");
        case 2:
        //  return require('../assets/img/risk-2.png');
        case 3:
          return require("../assets/img/risk-3.png");
        case 4:
        //  return require('../assets/img/risk-4.png');
        case 5:
          return require("../assets/img/risk-5.png");
      }
    },
    togglePeriod(periodType, row) {
      this.currentPeriodActive = periodType === "current";
      if (!this.currentPeriodActive) {
        this.fetchDetailData(row);
        // this.initChart(); // 切换到全天整体运行数据时重新初始化图表
      } else {
        // this.tableData = row;
        // 清除图表实例
        this.clearChart();
      }
    },
    clearChart() {
      // 清空图表容器
      // echarts.dispose(this.$refs.chartContainer);
      if (this.$refs.chartContainer) {
        const chartInstance = echarts.getInstanceByDom(
          this.$refs.chartContainer
        );
        if (chartInstance) {
          chartInstance.dispose();
        }
      }
    },
    onExpandChange(row, expandedRows) {
      this.dialogVisible = false;
      if (expandedRows.length > 0) {
        this.expands = [row.id];
        if (!this.currentPeriodActive) {
          this.fetchDetailData(row);
          if (this.dialogVisible) {
            this.handleView();
          }
        }
      } else {
        this.expands = [];
      }
      this.scrollToVisibleRow(row);
    },
    scrollToVisibleRow(row) {
      if (row) {
        const table = this.$refs.table;
        const bodyWrapper = table.$el.querySelector(".el-table__body-wrapper");

        // 确保 DOM 更新后再查询元素
        this.$nextTick(() => {
          const rowElement = bodyWrapper.querySelector(
            `tr.el-table__row.expanded`
          );
          const expandPanel = this.$refs.expandPanel;

          if (rowElement && expandPanel) {
            // 获取展开行相对于 bodyWrapper 的位置
            const rowRect = rowElement.getBoundingClientRect();
            // 获取展开面板相对于 bodyWrapper 的位置
            const rect = expandPanel.getBoundingClientRect();

            // 获取 bodyWrapper 的位置
            const bodyWrapperRect = bodyWrapper.getBoundingClientRect();

            // 当前滚动位置
            const scrollTop = bodyWrapper.scrollTop;

            // 检查展开行是否完全可见
            const isRowFullyVisible =
              rowRect.top >= bodyWrapperRect.top &&
              rowRect.bottom <= bodyWrapperRect.bottom;

            // 检查展开面板是否完全可见
            const isPanelFullyVisible =
              rect.top >= bodyWrapperRect.top &&
              rect.bottom <= bodyWrapperRect.bottom;

            // 如果展开行或展开面板没有完全可见，则滚动表格
            if (!isRowFullyVisible || !isPanelFullyVisible) {
              // 计算目标滚动位置，将展开行滚动到表格顶部
              const targetScrollTop =
                scrollTop + rowRect.top - bodyWrapperRect.top;

              // 应用新的滚动距离
              bodyWrapper.scrollTop = targetScrollTop;

              // 设置展开的行
              this.expands = [row.id];
            }
          } else {
            console.error("Row or expand panel not found.");
          }
        });
      }
    },
    drawDrone() {
      if (this.ws) {
        console.log("Closing previous WebSocket connection");
        this.ws.onmessage = null;
        this.ws.onclose = null;
        this.ws.close();
        this.ws = null;
      }

      this.ws = new WebSocket("ws://47.99.75.194:8084/ws/message");

      this.ws.onopen = () => {
        console.log("ws onopen");
        this.wsClosing = false;
      };

      this.ws.onmessage = (e) => {
        if (this.wsClosing) {
          console.log("WebSocket is closing, ignoring message.");
          return;
        }
        console.log("ws onmessage");

        const droneData = JSON.parse(e.data);

        // 如果模型数组为空，创建模型
        if (this.droneModels.length === 0) {
          droneData.forEach((item) => {
            const cartographic = new Cesium.Cartographic(
              Cesium.Math.toRadians(item.longitude),
              Cesium.Math.toRadians(item.latitude),
              item.altitude
            );
            const position =
              Cesium.Ellipsoid.WGS84.cartographicToCartesian(cartographic);

            // 创建并添加无人机模型
            const droneModel = addDroneModel(
              this.viewer,
              position,
              "/drone.glb"
            );
            this.droneModels.push(droneModel);
          });
        } else {
          // 更新已存在模型的位置
          droneData.forEach((item, index) => {
            const cartographic = new Cesium.Cartographic(
              Cesium.Math.toRadians(item.longitude),
              Cesium.Math.toRadians(item.latitude),
              item.altitude
            );
            const position =
              Cesium.Ellipsoid.WGS84.cartographicToCartesian(cartographic);

            // 更新模型位置
            this.droneModels[index].position = position;
          });
        }
      };

      this.ws.onclose = () => {
        console.log("WebSocket connection closed");
        this.wsClosing = false;
        this.ws = null;
      };
    },
    // flyToEntities(positions) {
    //   // 计算球体的包围盒（Bounding Box），以确保相机聚焦
    //   const boundingSphere = Cesium.BoundingSphere.fromPoints(positions);

    //   // 让相机飞到球体的范围
    //   this.viewer.camera.flyToBoundingSphere(boundingSphere, {
    //     duration: 2.0,  // 设置飞行时间，可以根据需要调整
    //     offset: new Cesium.HeadingPitchRange(0, -0.5, boundingSphere.radius * 2)  // 相机位置偏移，以便更好地看到球体
    //   });
    // },

    getCurrentTimeRange() {
      const time = this.getCurrentDateTime();
      const calMinTime = parseInt(time.slice(14, 16), 10);

      if (calMinTime >= 0 && calMinTime < 15) {
        this.startTimeNow = time.slice(0, 13) + ":00:00";
        this.endTimeNow = time.slice(0, 13) + ":14:59";
      } else if (this.calMinTime >= 15 && this.calMinTime < 30) {
        this.startTimeNow = time.slice(0, 13) + ":15:00";
        this.endTimeNow = time.slice(0, 13) + ":29:59";
      } else if (this.calMinTime >= 30 && this.calMinTime < 45) {
        this.startTimeNow = time.slice(0, 13) + ":30:00";
        this.endTimeNow = time.slice(0, 13) + ":44:59";
      } else if (this.calMinTime >= 45 && this.calMinTime < 60) {
        this.startTimeNow = time.slice(0, 13) + ":45:00";
        this.endTimeNow = time.slice(0, 13) + ":59:59";
      }
    },
    // generateDronePositions() {
    //   // 创建一组模拟的经纬度和高度数据
    //   const positions = [
    //     { longitude: 120.1551, latitude: 30.2741, altitude: 100 },  // 位置1
    //     { longitude: 120.1555, latitude: 30.2745, altitude: 150 },  // 位置2
    //     { longitude: 120.1560, latitude: 30.2750, altitude: 200 },  // 位置3
    //     { longitude: 120.1565, latitude: 30.2755, altitude: 250 },  // 位置4
    //     { longitude: 120.1570, latitude: 30.2760, altitude: 300 },  // 位置5
    //   ];

    //   // 将经纬度转换为 Cesium 的 Cartesian3 格式
    //   return positions.map((item) => {
    //     const cartographic = new Cesium.Cartographic(
    //       Cesium.Math.toRadians(item.longitude),
    //       Cesium.Math.toRadians(item.latitude),
    //       item.altitude
    //     );
    //     return Cesium.Ellipsoid.WGS84.cartographicToCartesian(cartographic);
    //   });
    // },

    // // 添加一组无人机模型
    //  addMultipleDroneModels(viewer) {
    //   const dronePositions = this.generateDronePositions(); // 获取生成的无人机位置
    //   const modelUrl = '/drone.glb'; // 模型文件路径

    //   // 遍历每个位置并添加无人机模型
    //   dronePositions.forEach((position) => {
    //     addDroneModel(viewer, position, modelUrl);
    //   });
    // },

    async fetchTableData() {
      this.dialogVisible = false;
      try {
        const response = await axios.post(
          "http://47.99.75.194:8084/api/alarm-information/selectall",
          this.queryData
        );

        if (response.data.code === 0) {
          this.tableData = response.data.data;
          this.viewer.entities.removeAll();
          this.updateRoutes();
          this.updatePolygonAreas();
        }
        this.getCurrentTimeRange();
        console.log(
          "QS",
          this.queryData.startTime,
          this.startTimeNow,
          this.queryData.endTime,
          this.endTimeNow
        );

        if (
          this.queryData.startTime == this.startTimeNow &&
          this.queryData.endTime == this.endTimeNow
        ) {
          console.log("选择的时间点需要建立websocket");
          this.drawDrone();
          // this.viewer.zoomTo(this.viewer.entities);
          // this.flyToEntities(this.positions);

          // this.addMultipleDroneModels(this.viewer);
        } else {
          console.log("选择的时刻不需要ws", this.ws);
          if (this.ws) {
            console.log(
              "选择的时刻不需要ws，但是存在了ws，即将清除ws",
              this.ws
            );
            this.wsClosing = true; // 标记 WebSocket 正在关闭
            this.ws.onmessage = null; // 禁止处理关闭后的消息
            this.ws.close(); // 关闭 WebSocket 连接
            // clearAllSpheres(this.viewer); // 清除无人机实体
            // clearAllDrones(this.viewer);
            this.droneModels = [];
          }
        }
      } catch (error) {
        console.error("获取表格数据失败", error);
      }
    },
    async fetchDetailData(row) {
      try {
        const response = await axios.post(
          // "http://127.0.0.1:4523/m2/5137928-4801695-default/215053564",
          //
          "http://47.99.75.194:8084/api/alarm-information/searchwholedata",
          // "http://localhost:8080/api/alarm-information/searchwholedata",
          { id: row.id, airspaceNumber: row.airspaceNumber }
        );
        // console.log(response);
        if (response.data.code === 0) {
          this.detailData = response.data.data;
          // console.log("detailData", this.detailData);

          // 处理数据，转换成一行一行的时间格式
          this.formattedAlarmTimes = this.detailData.alarmTime.map(
            (timeStr) => {
              // 使用正则表达式分割时间字符串
              const parts = timeStr.match(
                /(\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2})-(\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2})/
              );
              // console.log(parts);
              const [startTime, endTime] = parts.slice(1, 3);
              const formattedStartTime = startTime.split(" ")[1];
              const formattedEndTime = endTime.split(" ")[1];
              return `${formattedStartTime} - ${formattedEndTime}`;
            }
          );
          //  console.log("Formatted Alarm Times:", this.formattedAlarmTimes);

          this.$nextTick(() => {
            this.initChart(row); // 确保 DOM 更新后初始化图表
          });
        }
      } catch (error) {
        console.error("获取全天运行数据失败", error);
      }
    },
    initChart(row) {
      if (this.$refs.chartContainer) {
        // 初始化图表
        const chart = echarts.init(this.$refs.chartContainer);
        // 获取开始时间
        let startTime;
        if (!this.queryData.startTime) {
          startTime = new Date(2024, 8, 16);
          // startTime = new Date(Date.now() - 3600 * 2 * 1000); // 如果 startTime 为空，则获取当前时间前两小时的时间
        } else {
          startTime = new Date(this.queryData.startTime);
        }
        // 确保时间计算时使用的是时间戳
        const startTimeTimestamp = startTime.getTime(); // 确定筛选范围

        // 筛选数据
        const filteredData = this.detailData.airZoneDataList.filter((item) => {
          if (!item.time) return false; // 确保时间存在
          const itemTime = new Date(item.time);
          return (
            itemTime >= new Date(startTimeTimestamp - 3600 * 1000) &&
            itemTime <= new Date(startTimeTimestamp + 5 * 3600 * 1000)
          );
        });

        // console.log("filterDate", filteredData);
        // 数据统计
        const aggregatedData = this.aggregateDataByQuarterHour(filteredData);

        // 构建横轴数据
        const xAxisData = this.generateXAxisData(startTime);

        // 构建纵轴数据
        const yAxisData = aggregatedData.map((item) => item.totalFlow);
        // console.log(yAxisData);
        // 设置图表选项
        chart.setOption({
          tooltip: { trigger: "axis" },
          grid: {
            left: "40",
            right: "20", // 调整右侧距离
            top: "40",
            bottom: "40",
          },
          // grid:{
          //   left:"30",
          //   right:"30"
          // },
          xAxis: {
            data: xAxisData,
            // name: "时间",
            axisLabel: {
              rotate: 45, // 旋转45度
              // interval: 5, // 每隔5个标签显示一个
              color: "white",
            },

            nameTextStyle: {
              color: "white", // 设置y轴名称字体颜色为白色
            },
          },
          yAxis: {
            name: "流量/架次",
            axisLabel: {
              color: "white", // 设置y轴标签字体颜色为白色
            },
            nameTextStyle: {
              color: "white", // 设置y轴名称字体颜色为白色
            },
          },
          series: [
            {
              name: "流量数据",
              type: "line",
              data: yAxisData,
              areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "rgba(58,77,233,0.8)",
                  },
                  {
                    offset: 1,
                    color: "rgba(58,77,233,0.3)",
                  },
                ]),
              },
            },
          ],
        });
      }
    },
    // 局部数据统计函数
    aggregateDataByQuarterHour(dataList) {
      const aggregatedData = [];
      // console.log(dataList);
      // 获取起始时间和结束时间
      const startTime = new Date(dataList[0].time);
      const endTime = new Date(dataList[dataList.length - 1].time);

      let currentInterval = startTime;
      while (currentInterval <= endTime) {
        const endOfInterval = new Date(
          currentInterval.getTime() + 15 * 60 * 1000
        );
        const flowInInterval = dataList.reduce((acc, curr) => {
          const currTime = new Date(curr.time);
          if (currTime >= currentInterval && currTime < endOfInterval) {
            acc += curr.flow;
          }
          return acc;
        }, 0);

        aggregatedData.push({
          time: currentInterval,
          totalFlow: flowInInterval,
        });

        currentInterval = endOfInterval;
      }

      return aggregatedData;
    },
    // 构建局部横轴数据
    generateXAxisData(startTime) {
      const xAxisData = [];
      let currentTime = new Date(startTime.getTime());
      currentTime.setHours(
        startTime.getHours(),
        startTime.getMinutes() - (startTime.getMinutes() % 15),
        0,
        0
      ); // 向下取最近的15分钟
      const endTime = new Date(startTime.getTime() + 2 * 3600 * 1000); // 向后取两小时

      while (currentTime <= endTime) {
        xAxisData.push(
          `${currentTime.getHours().toString().padStart(2, "0")}:${currentTime
            .getMinutes()
            .toString()
            .padStart(2, "0")}`
        );
        currentTime = new Date(currentTime.getTime() + 15 * 60 * 1000);
      }

      return xAxisData;
    },

    fullChart() {
      if (this.$refs.fullChartContainer) {
        // 初始化图表
        const chart = echarts.init(this.$refs.fullChartContainer);

        // 提取年月日信息
        const extractYearMonthDay = (timestamp) => {
          const date = new Date(timestamp);
          return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(
            2,
            "0"
          )}-${String(date.getDate()).padStart(2, "0")}`;
        };

        // 提取年月日信息
        const yearMonthDay = extractYearMonthDay(this.queryData.endTime);

        // 构建横轴数据（使用原始数据中的时间）
        const xAxisData = this.detailData.airZoneDataList.map(
          (item) => item.time
        );

        // 构建纵轴数据，确保每个时间点是唯一的
        const seriesData = this.detailData.airZoneDataList
          .map((item) => {
            try {
              const timestamp = new Date(item.time).getTime();
              return { name: item.time, value: [timestamp, item.flow] };
            } catch (error) {
              console.error(
                `Error processing item ${JSON.stringify(item)}:`,
                error
              );
              return null;
            }
          })
          .filter((item) => item); // 移除无效的条目

        // 输出 seriesData 以确认数据是否正确
        // console.log("seriesData:", seriesData);

        // 创建图表配置
        chart.setOption({
          tooltip: {
            trigger: "axis",
            formatter: function (params) {
              if (params.length > 0) {
                const firstParam = params[0];
                // 格式化日期显示时间戳
                const date = new Date(firstParam.value[0]);
                const formattedDate = `${date.getFullYear()}-${(
                  date.getMonth() + 1
                )
                  .toString()
                  .padStart(2, "0")}-${date
                    .getDate()
                    .toString()
                    .padStart(2, "0")} ${date
                      .getHours()
                      .toString()
                      .padStart(2, "0")}:${date
                        .getMinutes()
                        .toString()
                        .padStart(2, "0")}`;
                return `${formattedDate}<br>流量: ${firstParam.value[1]}`;
              }
              return "";
            },
          },
          grid: {
            left: "40",
            right: "20",
            top: "40",
            bottom: "40",
          },
          xAxis: {
            type: "time",
            boundaryGap: false,
            min: new Date(`${yearMonthDay} 00:00`).getTime(),
            max: new Date(`${yearMonthDay} 23:59`).getTime(),
            axisLabel: {
              rotate: 45,
              interval: 0,
              color: "white",
              formatter: function (value) {
                const date = new Date(value);
                return `${date.getHours() < 10 ? "0" : ""}${date.getHours()}:${date.getMinutes() < 10 ? "0" : ""
                  }${date.getMinutes()}`;
              },
            },
            splitLine: {
              show: false,
            },
            splitNumber: 24,
          },
          yAxis: {
            name: "流量/架次",
            axisLabel: {
              color: "white",
            },
            nameTextStyle: {
              color: "white",
            },
          },
          series: [
            {
              name: "流量数据",
              type: "line",
              connectNulls: true, // 连接空数据点，防止断线
              showSymbol: false,
              data: seriesData.map((item) => item.value),
              areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "rgba(58,77,233,0.8)",
                  },
                  {
                    offset: 1,
                    color: "rgba(58,77,233,0.3)",
                  },
                ]),
              },
            },
          ],
        });

        // 渲染图表
        chart.resize();
      }
    },
  },
  beforeDestroy() {
    this.ws.close();
  },
};
</script>

<style scoped>
.left-module {
  position: fixed;
  top: 32.5%;
  left: 14.8%;
  width: 900px;
  /* left: 20%;
  width: 500px; */
  background-color: rgba(31, 31, 56, 0.5);
  /* 半透明背景 */
  z-index: 1000;
  padding: 10px;
  padding-top: 0px;
  box-sizing: border-box;
  overflow-y: auto;
  /* 滚动条 */
}

.module-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.module-content {
  height: calc(100% - 50px);
  /* 减去头部的高度 */
  margin: 20px 0 10px 0;
}

.flow_assessment {
  position: relative;
}

.cesium_flow {
  position: absolute;
  width: 100%;
  margin-top: 5px;
  height: 846px;
}

.demo-table-expand {
  font-size: 0;
}

.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}

h1 {
  color: #ffffff;
}

.group_7_flow {
  position: relative;
  /* width: 1556px; */
  height: 27px;
  background: url(../assets/img/SketchPng9a3840ec9a1e44cb90b8cc0d22f86217e9bd2dd719c9cad7bfacd8322b4b85d6.png) 100% no-repeat;
  background-size: 100% 100%;
}

.image-wrapper_flow {
  height: 15px;
  background: url(../assets/img/SketchPng52b9227060fb971dc8aa80dd7f6f807b2f2e66c54febc2818d9aa6cd633d0932.png) 1px 0px no-repeat;
  background-size: 284px 16px;
  width: 286px;
  margin: 6px 0 0 14px;
}

.image_1_flow {
  width: 22px;
  height: 20px;
  margin: -11px 0 0 2px;
}

.text_13_flow {
  background-image: linear-gradient(180deg,
      rgba(200, 215, 228, 1) 0,
      rgba(255, 255, 255, 1) 100%);
  position: absolute;
  left: 63px;
  /* top原先是3 */
  top: 2px;
  width: 126px;
  height: 20px;
  overflow-wrap: break-word;
  color: rgba(112, 112, 112, 1);
  font-size: 20px;
  letter-spacing: 1px;
  font-family: PangMenZhengDao-3;
  font-weight: bold;
  text-align: left;
  white-space: nowrap;
  line-height: 23px;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/*查询*/
.group_8_flow {
  /* width: 514px;
  height: 32px;
   */
  display: flex;
  align-items: center;
  margin-top: 5px;
}

.text_time_flow {
  width: 42px;
  height: 100%;
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 14px;
  font-weight: normal;
  /* 使用 normal 而不是 NaN */
  text-align: left;
  white-space: nowrap;
  line-height: 20px;
  margin: 0px 0 0 24px;
}

/* .text_14_flow {
  width: 28px;
  height: 20px;
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 14px;
  font-family: AlibabaPuHuiTi_2_55_Regular;
  font-weight: NaN;
  text-align: left;
  white-space: nowrap;
  line-height: 20px;
  margin-top: 5px;
} */
.text_14_flow {
  width: 42px;
  height: 20px;
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 14px;
  font-weight: NaN;
  text-align: left;
  white-space: nowrap;
  line-height: 20px;
  margin: 6px 0 0 24px;
}

/* 覆盖 el-time-select 组件的样式 */

.group_8_flow /deep/ .el-input .el-input__inner {
  background: url(../assets/img/SketchPngffbed662ac69525967f5cf6f84f234a44e2ad9986b64954a1d015e6d544cb1c0.png) 100% no-repeat;
  background-size: 100% 100%;
  border: none;
  /* 移除输入框的边框 */
  outline: none;
  /* 移除聚焦时的轮廓 */
  color: rgba(255, 255, 255, 1);
  /* 设置文本颜色 */
  font-size: 14px;
  /* 设置字体大小 */
  text-align: left;
  /* 文本左对齐 */
  white-space: nowrap;
  /* 保持文本在一行 */
  line-height: 20px;
  /* 设置行高 */
  height: 100%;
  /* 设置输入框的高度 */
  padding: 0px 0 0 20px;
  /* 根据需要调整内边距 */
  cursor: pointer;
  /* 将光标设置为指针，表示可点击 */
}

.group_8_flow /deep/ .el-date-editor.el-input--prefix.el-input--suffix.el-date-editor--time-select {
  width: 160px;
  /* 根据需要调整宽度 */
  height: 32px;
  /* 根据需要调整高度 */
  margin-left: 10px;
  /* background: url(../assets/img/SketchPngffbed662ac69525967f5cf6f84f234a44e2ad9986b64954a1d015e6d544cb1c0.png) 100% no-repeat; */
  background-size: 100% 100%;
}

.group_8_flow /deep/ .el-date-editor.el-input--prefix.el-input--suffix.el-date-editor--time-select .el-input__prefix {
  display: none;
  /* 隐藏前缀图标 */
}

.group_8_flow /deep/ .el-date-editor.el-input--prefix.el-input--suffix.el-date-editor--time-select .el-input__suffix {
  display: none;
  /* 隐藏后缀图标 */
}

.group_8_flow /deep/ .el-date-editor.el-input--prefix.el-input--suffix.el-date-editor--time-select .el-time-panel__content .el-time-panel__item:hover {
  background-color: #f0f0f0;
  /* 鼠标悬停时的背景色 */
}

.group_8_flow /deep/ .el-date-editor.el-input--prefix.el-input--suffix.el-date-editor--time-select .el-time-panel__content .el-time-panel__item.selected {
  color: rgba(255, 255, 255, 1);
  background-color: #409eff;
  /* 选中项的背景色 */
}

.group_8_flow /deep/ .el-picker-panel time-select el-popper {
  border: none;
  background: #409eff;
}

.text_18_flow {
  width: 9px;
  height: 20px;
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 14px;
  font-weight: normal;
  text-align: left;
  white-space: nowrap;
  line-height: 20px;
  margin: 6px 0 0 10px;
}

.text_16_flow {
  width: 28px;
  height: 20px;
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 14px;
  font-family: AlibabaPuHuiTi_2_55_Regular;
  font-weight: NaN;
  text-align: left;
  white-space: nowrap;
  line-height: 20px;
  margin: 5px 0 0 24px;
}

.group_8_flow /deep/ .el-button {
  width: 72px;
  /* 设置按钮宽度 */
  height: 32px;
  /* 设置按钮高度 */
  margin-left: 24px;
  /* 设置按钮左边距 */
  padding: 0;
  /* 移除默认的内边距 */
}

/* 模块 */

.container_flow {
  width: 340px;
  position: absolute;
  right: 0px;
  min-height: 824px;
  /* max-height: 500px; */
  top: 80px;
  margin-left: auto;
  /* 自动左边距，推到右侧 */
  background: transparent;
  /* background: rgba(146, 145, 196, 0.2); */
}

.group_20_flow {
  height: 27px;
  background: url(../assets/img/SketchPng600ae81165585f35dfc47ef36945158f74ebdbb3bf384fd1fa17d9446ad1ef0e.png) 0px 0px no-repeat;
  background-size: 320px 28px;
  margin-top: 6px;
  width: 320px;
  position: relative;
}

.group_21_flow {
  height: 15px;
  background: url(../assets/img/SketchPng5ad66f1eeb5fdb8ee4d60f15f6857a5733df1d892feec90bd92804c0ab6437de.png) 1px 0px no-repeat;
  background-size: 284px 16px;
  width: 286px;
  position: relative;
  margin: 6px 0 0 14px;
}

.image_3 {
  position: absolute;
  /* 图片绝对定位，不影响布局 */
  top: 18%;
  left: 17%;

  width: 80%;
  /* 让图片宽度覆盖整个容器 */
  height: 80%;
  /* 让图片高度覆盖整个容器 */
  z-index: 0;
  /* 将背景图片置于内容下层 */
}

.image_3_flow {
  position: absolute;
  left: 271px;
  top: 5px;
  width: 22px;
  height: 15px;
}

.thumbnail_55_flow {
  position: absolute;
  left: 3px;
  top: -4px;
  width: 20px;
  height: 20px;
}

.text_21_flow {
  background-image: linear-gradient(180deg,
      rgba(200, 215, 228, 1) 0,
      rgba(255, 255, 255, 1) 100%);
  position: absolute;
  left: 64px;
  top: 3px;
  width: 126px;
  height: 20px;
  overflow-wrap: break-word;
  color: rgba(112, 112, 112, 1);
  font-size: 20px;
  letter-spacing: 1px;
  font-family: PangMenZhengDao-3;
  font-weight: bold;
  text-align: left;
  white-space: nowrap;
  line-height: 23px;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* 选择查询 */
.group_22_flow {
  width: 320px;
  height: 32px;
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
}

.block_17_flow {
  flex: 1;
  /* 使两个 select 平分容器宽度 */
  background: url(../assets/img/SketchPngfcaec0cbc853eb310e69cdc4565a8ec4067fc2b130f2829647d2291b7a21d1db.png) 100% no-repeat;
  background-size: 100% 100%;
  position: relative;
}

.block_18_flow {
  flex: 1;
  background: url(../assets/img/SketchPngfcaec0cbc853eb310e69cdc4565a8ec4067fc2b130f2829647d2291b7a21d1db.png) 100% no-repeat;
  background-size: 100% 100%;
  position: relative;
  margin-left: 10px;
  /* 添加间隔 */
}

.select-box_flow {
  width: 100%;
  height: 32px;
  background: transparent;

  border: none;
  color: rgba(255, 255, 255, 1);
  font-size: 14px;
  text-align: left;
  outline: none;
  cursor: pointer;
}

.select-box_flow /deep/ .el-input__inner {
  /* background: url(../assets/img/SketchPngffbed662ac69525967f5cf6f84f234a44e2ad9986b64954a1d015e6d544cb1c0.png) 100% no-repeat;
  background-size: 100% 100%; */
  background-color: rgba(112, 112, 112, 0.5);
  /* border: none; */
  border: 1px solid #f0f0f073;
  color: rgba(255, 255, 255, 1);
  font-size: 14px;
  text-align: left;
  line-height: 32px;
  height: 32px;
  padding: 0 10px;
  /* 调整内边距以居中文本 */
}

/* 
.select-box /deep/ .el-input__suffix {
  display: none;
} */
/* 
 ::v-deep .el-select-dropdown{
  
  background: rgba(87, 133, 87, 0.78);
  
  border:0px;
  

}

 /deep/ .el-select-dropdown__item {
  color: rgb(7, 3, 3);
  font-size: 14px;
  text-align: left;
  line-height: 20px;
}

 /deep/ .el-select-dropdown__item:hover {
  background-color: #f0f0f0;
}

 /deep/ .el-select-dropdown__item.selected {
  color: rgba(255, 255, 255, 1);
  background-color: #0e161d;
} */

/* 列表 */
.section_14_flow {
  position: relative;
  /* 或者根据实际布局调整 */
  /* width: 320px; */
  overflow: auto;
  /* 自动添加滚动条 */
  max-height: 800px;
  /* 设置最大高度 */
  width: 100%;
  /* min-height: 366px; */
  background: url(../assets/img/SketchPng32fee252ef5eb54c7165ed49a9a6d3e4ed96b2b839a4ffd57aacaf48eb0905e8.png) 100% no-repeat;
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;
  transform: translateY(-3px);
  /* 向上移动 2px */
}

.group0_39_flow {
  /* width: 234px;
  height: 311px;
  margin: 10px 0 0 24px; */
  width: 100%;
  padding: 10px 24px;
  /* 添加内边距以便于阅读 */
}

.text_33_flow,
.text_35_flow,
.text_37_flow,
.text_39_flow {
  width: fit-content;
  color: rgba(136, 211, 255, 1);
  font-size: 14px;
  font-family: "AlibabaPuHuiTi_2_55_Regular", sans-serif;
  font-weight: normal;
  text-align: left;
  line-height: 20px;
  margin-top: 10px;
  display: block;
  /* 确保每个 span 占用一行 */
}

.text_34_flow,
.text_36_flow,
.text_38_flow,
.text_40_flow {
  width: fit-content;
  color: rgba(255, 255, 255, 1);
  font-size: 14px;
  font-family: "AlibabaPuHuiTi_2_55_Regular", sans-serif;
  font-weight: normal;
  text-align: left;
  line-height: 20px;
  margin-top: 4px;
  display: block;
}

.network-analysis-btn {
  background: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
}

/* 面板两个按钮 */

/* 按钮容器 */
.buttons-container_flow {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
  width: 100%;
  /* height:0px; */
  padding: 10px 0;
}

.text-wrapper_10_flow {
  /* height: 32px; */
  background: url(../assets/img/SketchPnge62f3939893534f8f09e77a374e79448a9819af1b1be57b08a0c8424a6cfe7e4.png) 100% no-repeat;
  background-size: 100% 100%;
  /* width: 195px; */
  margin-left: 25px;
  margin-right: 20px;
  /* width: 100%; */
  display: flex;
  justify-content: center;
}

.text-wrapper_11_flow {
  /* height: 32px; */
  background: url(../assets/img/SketchPnge62f3939893534f8f09e77a374e79448a9819af1b1be57b08a0c8424a6cfe7e4.png) 100% no-repeat;
  background-size: 100% 100%;
  /* width: 195px; */
  margin-right: 25px;
  /* width: 100%; */
  display: flex;
  justify-content: center;
}

.btn_full {
  margin-right: 24px;
  background: url(../assets/img/SketchPnge62f3939893534f8f09e77a374e79448a9819af1b1be57b08a0c8424a6cfe7e4.png) 100% no-repeat;
  color: white;
  border: none;
}

/* 按钮基础样式 */
.current-period-btn,
.full-day-btn {
  background: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
  padding: 5px 5px;
  transition: all 0.3s ease;
}

/* 选中状态 */
.current-period-btn.active,
.full-day-btn.active {
  background-color: #409eff;
  color: white;
}

/* 悬停效果 */
.current-period-btn:hover,
.full-day-btn:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

/* 选中状态下的悬停效果 */
.current-period-btn.active:hover,
.full-day-btn.active:hover {
  background-color: #2d8cf0;
}

/* 数据组 */

/* .regional_table_flow {
  overflow: auto;
  height: 590px;
} */
/* 隐藏垂直滚动条 */

/* 最外层透明表格背景与白色字体 */
.regional_table_flow /deep/ .el-table,
.regional_table_flow /deep/ .el-table__expanded-cell {
  background-color: transparent;
  /* 设置透明背景 */
  color: white;
  /* 表格文字颜色 */
}

/* 表格头部和单元格的背景颜色透明 */
.regional_table_flow /deep/ .el-table th,
.regional_table_flow /deep/ .el-table tr,
.regional_table_flow /deep/ .el-table td {
  background-color: transparent !important;
  /* 背景透明 */
  color: white;
  /* 确保文字为白色 */
  border: none;
}

.regional_table_flow /deep/ .el-table .el-table__body-wrapper .el-table__body tr td {
  padding: 0.0625rem 0;
}

.regional_table_flow /deep/ .el-table td .cell {
  background: url(../assets/img/SketchPng32fee252ef5eb54c7165ed49a9a6d3e4ed96b2b839a4ffd57aacaf48eb0905e8.png) 100% no-repeat;
  background-size: 100% 100%;
  padding: 0;
}

/* 设置表格边框 */
.regional_table_flow /deep/ .el-table__body-wrapper {
  border: none;
}

.regional_table_flow /deep/ .el-table .el-table__header th.el-table__cell {
  background-color: transparent;
  /* 清除默认背景色 */
  border-bottom: none;
  /* 移除默认边框 */
  padding: 0;
  font-weight: normal;
}

.regional_table_flow /deep/ .el-table .el-table__header th.el-table__cell .cell {
  padding: 0px;
}

/* 自定义表头样式 */
.regional_table_flow /deep/ .el-table .el-table__header th.el-table__cell {
  height: 29px;
  background: url(../assets/img/SketchPng34a1cd5f82649ca4969d727ad3e3a01a2848a5b130d7c1a5186ea70fb9cf9845.png) 100% no-repeat;
  background-size: 100% 100%;
  /* width: 320px; */
  position: relative;
  /* 相对定位 */
}

.regional_table_flow /deep/ .el-table .el-table__header th.el-table__cell .text-wrapper_12 {
  width: 282px;
  height: 20px;
  margin: 5px 0 0 14px;
  display: flex;
  /* 使用 Flex 布局 */
  align-items: center;
  /* 垂直居中对齐 */
}

/* 数据行 */
.regional_table_flow /deep/ .el-table__body tr.el-table__row td {
  border: none;
  /* 确保数据行没有边框 */
}

/* 展开行 */
.regional_table_flow /deep/ .el-table__expanded-cell {
  padding: 10px;
  background-color: transparent;
  /* 展开行背景透明 */
  border: none;
  /* 确保展开行没有边框 */
}

.regional_table_flow /deep/ .el-table__expand-icon {
  height: 23px;
}

/* 确保所有内部元素没有边框 */
.regional_table_flow /deep/ .el-table .el-table__body-wrapper .el-table__row,
.regional_table_flow /deep/ .el-table .el-table__body-wrapper .el-table__header th,
.regional_table_flow /deep/ .el-table .el-table__body-wrapper .el-table__body tr td {
  border: none !important;
}

.regional_table_flow /deep/ .el-table::before {
  height: 0px;
}

.charts_flow {
  background: rgb(24, 33, 53);
  margin: 0 20px 0 20px;
  border: 1px solid rgb(17, 69, 83);
  border-radius: 4px;
}

/*新需求时间选择器相关*/
.time_block /deep/ .el-input__icon {
  display: none;
}

.time_block /deep/ .el-date-editor.el-input,
.el-date-editor.el-input__inner {
  display: flex;
  align-items: center;
  /*纵向居中*/
  justify-content: center;
  /*横向居中*/
  height: 100%;
}

.time_block /deep/.el-date-editor el-input el-input--prefix el-input--suffix el-date-editor--datetime {
  display: flex;
  align-items: center;
  /*纵向居中*/
  justify-content: center;
  /*横向居中*/
  height: 100%;
}

.time_block /deep/ .el-input__inner {
  background: transparent;

  /* 背景透明 */
  display: flex;
  align-items: center;
  text-align: center;
  width: 100%;
  height: 30px !important;
  /* 填满time_block容器 */
  border: none;
  /* 去掉边框 */
  border-radius: 4px;
  box-shadow: none;
  /* 去掉阴影 */
  padding: 0;
  /* 去除内边距 */
  color: #ffffff;
  font-size: 14px;
  font-family: AlibabaPuHuiTi_2_65_Medium;
  background-image: url("@/assets/img/module5/alert/alert_label.png");
  background-repeat: no-repeat;
  background-size: cover;
  margin-left: 20px;
}
</style>
<style>
.dxfSelect {
  background: #09284e !important;
  border: 1px solid #0e2647 !important;
}

.dxfSelect .el-popper__arrow::before {
  background: #184f93 !important;
  border: 1px solid #2c5ea2 !important;
}

.dxfSelect .el-select-dropdown__item {
  color: white;
  /* 设置文本颜色为白色 */
}

.dxfSelect .el-select-dropdown__item.hover,
.dxfSelect .el-select-dropdown__item:hover {
  background-color: #1a356b;
  /* 鼠标悬停时的背景色 */
}

.dxfSelect .el-select-dropdown__item.selected.hover {
  background-color: #1a356b;
  /* 鼠标悬停时的背景色 */
}

.el-popper[x-placement^=bottom] .popper__arrow,
/*el-popover上边三角下层的颜色---也就是视觉上的边框*/
.el-popper[x-placement^=bottom] .popper__arrow::after

/*el-popover上边三角表层的颜色---也就是视觉上的角*/
  {
  border-bottom-color: transparent !important;
  left: 85% !important;
}

/*时间选择器面板颜色相关*/
/*主框背景颜色*/
.selectDown {
  background: #0a1b28 !important;
}

.selectDown .el-date-picker__header-label {
  color: #ffffff !important;
  /*日历header文字颜色*/
}

.selectDown .el-date-table td.next-month,
.el-date-table td.prev-month {
  /*上个月和下个月日期字体颜色*/
  color: #606266 !important;
}

/*当月字体颜色*/
.selectDown.el-picker-panel {
  color: #ffffff !important;
}

/*星期文字颜色*/
th {
  color: #ffffff !important;
}

/*切换年月日箭头颜色*/
.selectDown .el-picker-panel__icon-btn {
  color: #ffffff !important;
}

/*input框背景*/
.selectDown .el-input__inner {
  background: #0a1b28 !important;
  color: #ffffff !important;
}

/*主框底部背景*/
.selectDown .el-picker-panel__footer {
  background: transparent !important;
}

/*确定按钮样式*/
.selectDown .el-button--mini {
  background: transparent !important;
  color: #ffffff !important;
  border: none;
}

.selectDown .el-button--text {
  /*主面板按钮颜色*/
  color: #409eff !important;
}

/*时分秒选择器相关*/
.selectDown .el-time-panel {
  background-color: #0a1b28 !important;
  /*整体背景颜色*/
}

/*时分秒字体颜色*/
.selectDown .el-time-spinner__item {
  color: #ffffff !important;
}

.selectDown .el-time-spinner__item:hover:not(.disabled):not(.active) {
  color: #2e4151 !important;
}

.selectDown .el-time-panel__btn {
  /*时分秒选择器的取消按钮*/
  color: #ffffff;
}

.selectDown .el-date-table td.disabled div {
  background-color: #0a1b28;
  color: #606266;
}
</style>